import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { NzModalService } from 'ng-zorro-antd/modal';
import { Router } from '@angular/router';

@Component({
  selector: 'app-race-list',
  templateUrl: './race-list.component.html',
  styleUrls: ['./race-list.component.css']
})
export class RaceListComponent implements OnInit {
  validateForm: FormGroup;
  listOfData = [
    {
      id: 1,
      name: '牛头人',
      address: '雷霆崖',
      hero: '老牛',
      text: '你的祖先在忽悠着你！',
      status: 'A',
    },
    {
      id: 2,
      name: '亡灵',
      address: '幽暗城',
      hero: '小黑',
      text: '我们是被遗忘者！',
      status: 'A',
    },
    {
      id: 3,
      name: '暗夜精灵',
      address: '达纳苏斯',
      hero: '白虎',
      text: '沃瑞死欧我热那也，阿森不！',
      status: 'A',
    },
    {
      id: 4,
      name: '人族',
      address: '暴风城',
      hero: '灰烬使者',
      text: '无上的圣光啊,请赐予我力量,冲破这枷锁',
      status: 'D',
    },
    {
      id: 5,
      name: '兽人',
      address: '奥格瑞玛',
      hero: '萨尔',
      text: '楼可糖',
      status: 'D',
    },
  ];
  statusType = {
    A: '活动',
    D: '禁用',
  };
  checked = false;
  listOfCurrentPageData = [];
  setOfCheckedId = new Set<number>();

  btnDisabled = true;
  btnActive = true;

  constructor(
    private fb: FormBuilder,
    private modal: NzModalService,
    private router: Router
  ) {
    this.validateForm = this.fb.group({
      name: [null],
      address: [null],
      hero: [null],
      text: [null],
      status: [null],
    });
  }

  ngOnInit(): void {
    this.onCurrentPageDataChange(this.listOfData);
  }

  updateCheckedSet(id: number, checked: boolean): void {
    if (checked) {
      this.setOfCheckedId.add(id);
    } else {
      this.setOfCheckedId.delete(id);
    }
  }

  onCurrentPageDataChange(listOfCurrentPageData): void {
    this.listOfCurrentPageData = listOfCurrentPageData;
    this.refreshCheckedStatus();
  }

  refreshCheckedStatus(): void {
    this.checked = this.listOfCurrentPageData.every(val => this.setOfCheckedId.has(val.id));
    const checkedData = this.listOfData.filter(data => this.setOfCheckedId.has(data.id));
    this.btnDisabled = checkedData.every(val => val.status === 'D');
    this.btnActive = checkedData.every(val => val.status === 'A');
  }

  onItemChecked(id: number, checked: boolean): void {
    this.updateCheckedSet(id, checked);
    this.refreshCheckedStatus();
  }

  onAllChecked(checked: boolean): void {
    this.listOfCurrentPageData.forEach(val => this.updateCheckedSet(val.id, checked));
    this.refreshCheckedStatus();
  }

  clearChecked(): void {
    this.setOfCheckedId.clear();
    this.refreshCheckedStatus();
  }

  queryRaceList(): void {
    console.warn(this.validateForm.value);
  }

  deleteHandle(data): void {
    this.modal.confirm({
      nzTitle: '种族',
      nzContent: '是否删除' + data.name,
      nzOnOk: () => {

      }
    });
  }

  addRace(): void {
    this.router.navigate(['/race/add']);
  }

  nextPage(data): void {
    this.router.navigate(['/race/add'], { queryParams: { id: data.id, name: data.name } });
  }

  clickHandle(type: string): void {
    const checkedData = this.listOfData.filter(data => this.setOfCheckedId.has(data.id));
    if (checkedData.length <= 0) { return; }
    console.warn(checkedData);
  }

}
